<template>
  <view :class="['function-card', customClass]" @click="handleClick">
    <view :class="['card-gradient', gradientClass]"></view>
    <view class="card-content">
      <text :class="['function-icon', iconSize]">{{ icon }}</text>
      <text class="function-name">{{ name }}</text>
      <text v-if="description" class="function-desc">{{ description }}</text>
      <slot name="badge"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FunctionCard',
  props: {
    // 卡片图标
    icon: {
      type: String,
      required: true
    },
    // 卡片名称
    name: {
      type: String,
      required: true
    },
    // 卡片描述（可选）
    description: {
      type: String,
      default: ''
    },
    // 渐变背景类名
    gradientClass: {
      type: String,
      default: 'gradient-purple'
    },
    // 自定义类名
    customClass: {
      type: String,
      default: ''
    },
    // 图标大小类名
    iconSize: {
      type: String,
      default: 'function-icon-large'
    },
    // 跳转路径
    path: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      if (this.path) {
        uni.navigateTo({ url: this.path });
      }
      this.$emit('click');
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.function-card {
  position: relative;
  background: $bg-white;
  border-radius: $border-radius-lg;
  padding: 32rpx 24rpx;
  box-shadow: $shadow-base;
  overflow: hidden;
  transition: all $transition-base $transition-ease;
  
  &:active {
    transform: translateY(-6rpx);
    box-shadow: $shadow-lg;
  }
}

.card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  opacity: 0.15;
}

.card-content {
  position: relative;
  text-align: center;
  z-index: 1;
}

.function-icon-large {
  font-size: 56rpx;
  display: block;
  margin-bottom: 14rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
  @include float;
}

.function-icon-normal {
  font-size: 48rpx;
  display: block;
  margin-bottom: 12rpx;
  filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.1));
  @include float;
}

.function-name {
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  color: $text-primary;
  display: block;
  margin-bottom: 8rpx;
}

.function-desc {
  font-size: $font-size-sm;
  color: $text-secondary;
  display: block;
}

/* 全局样式文件中已有这些渐变定义，这里仅为了组件可独立使用 */
.gradient-purple {
  background: $gradient-purple;
}

.gradient-blue {
  background: $gradient-blue;
}

.gradient-green {
  background: $gradient-green;
}

.gradient-orange {
  background: $gradient-orange;
}

.gradient-pink {
  background: $gradient-pink;
}

.gradient-gold {
  background: $gradient-gold;
}

.gradient-red {
  background: $gradient-red;
}

.gradient-cyan {
  background: $gradient-cyan;
}
</style>
